<template>
  <div class="container">
    <van-search
      custom-class="mk-van-search"
      background="#F6729C"
      :value="keywords"
      placeholder="年抛 金粉 活动"
      v-model="keywords"
      @search="startSearch"
    ></van-search>
    <van-row gutter="10" v-if="productsList">
      <div class="pro-list">
        <van-col
          span="12"
          v-for="(item, index) in productsList"
          :key="index"
          :index="index"
          @click="onDetail(item.id)"
        >
          <div class="pro-item">
            <image class="pro-pic" mode="aspectFill" :src="item.images[0] + '?imageView2/1/w/320/h/320/q/75'"/>
            <div class="info">
              <div class="desc">{{item.title}}</div>
              <p class="price">￥{{item.price}}</p>
              <van-tag v-if="item.is_proprietary" size="medium" color="#f2826a" plain style="display:inline;" >自营商品</van-tag>
            </div>
          </div>
        </van-col>
      </div>
    </van-row>
     <van-row v-if="emptyStatus">
       <van-col span="24">
         <div class="empty">
        <img  src="../../../static/images/empty-search.png">
         </div>
       </van-col>
    </van-row>

    <page-footer/>
    <van-toast id="van-toast"/>
  </div>
</template>
<script>
import * as ProductAction from '@/api/product'
import PageFooter from '@/components/page-footer.vue'
import Toast from 'vant-weapp/dist/toast/toast'
import { mapState } from 'vuex'
export default {
  components: {
    PageFooter
  },
  data () {
    return {
      keywords: '',
      emptyStatus: false,
      productsList: [],
      page: 1
    }
  },
  computed: {
    ...mapState(['me'])
  },
  onLoad (e) {
    wx.showNavigationBarLoading()
    this.keywords = ''
    this.productsList = []
    wx.showShareMenu({ withShareTicket: true })
    if (this.$root.$mp.query.title) this.keywords = this.$root.$mp.query.title
    this.searchAction()
    if (this.$root.$mp.query.code) wx.setStorageSync('__inviteCode', this.$root.$mp.query.code)
  },
  onShareAppMessage (res) {
    return {
      title: this.shareTitle(),
      path: this.sharePath()
    }
  },
  methods: {
    shareTitle () {
      if (!this.me) return `美控小管家向您推荐${this.keywords}相关`
      if (this.me) return `${this.me.nickname}向您推荐${this.keywords}相关`
    },
    sharePath () {
      if (!this.me) return '/pages/product/search?title=' + this.keywords
      if (this.me && this.me.invite_code) return '/pages/product/search?code=' + this.me.invite_code + '&title=' + this.keywords
    },
    onDetail (id) {
      wx.navigateTo({ url: 'detail?id=' + id })
    },
    startSearch (event) {
      wx.showNavigationBarLoading()
      this.productsList = []
      this.page = 1
      this.keywords = event.mp.detail
      this.searchAction()
    },
    searchAction () {
      this.emptyStatus = false
      let params = {
        page: this.page,
        key: this.keywords
      }
      ProductAction.list(params)
        .then(data => {
          if (data.data.length > 0) this.productsList = this.productsList.concat(data.data)
          if (this.productsList.length === 0) this.emptyStatus = true
          wx.hideNavigationBarLoading()
        })
        .catch(err => Toast(err.msg))
    }
  },
  onReachBottom () {
    wx.showNavigationBarLoading()
    this.page += 1
    this.searchAction()
  }
}
</script>

<style lang="less" scoped>
.container {
  position: relative;
  min-height: 1500rpx;
  width: 100%;
  overflow: hidden;
  padding-bottom: 150rpx;
  background-color: #f8f8f8;
  .pro-list {
    .pro-item {
  padding: 10px 0;
  .price {
    display: inline;
    margin-right: 10px;
  }
}
}
  .empty {
    margin-top: 100rpx;
    display: flex;
    justify-content: center;
    img {
      width:400rpx; 
      height:335rpx;
    }
  }
}


</style>

